/**
 * 作者:TL(tongling19890103@126.com)
 * 时间：2020-07-17.
 * 功能：
 */

layui.use(['tree', 'layer', 'laypage', 'element'], function () {
    var layer = layui.layer
        , element = layui.element
        , laypage = layui.laypage
        , $ = layui.jquery;

    /**
     * 新增知识库页面
     */
    // 拖拽开始事件
    $(".drag-item").draggable({
        connectToSortable: ".drop-content",
        helper: "clone",
        revert: "invalid",
        start: function () {},
        drag: function () {},
        stop: function () {}
    });
    // 拖拽结束事件
    $(".drop-content").droppable({
        drop: function (event, ui) {
            if ($(ui.draggable.context).hasClass("drag-item")) {
                var type = $(ui.draggable.context).attr("data-type");
                var html = "";
                if (type == "input") {
                    html = getInput();
                    $(ui.draggable.context).removeAttr("style").addClass("no-val drop-item").removeClass("drag-item");
                } else if (type == "textarea") {
                    html = getTextarea();
                    $(ui.draggable.context).removeAttr("style").addClass("no-val drop-item").removeClass("drag-item");
                } else if (type == "select") {
                    html = getSelect();
                    $(ui.draggable.context).removeAttr("style").addClass("no-val drop-item").removeClass("drag-item");
                }
                $(ui.draggable.context).html(html);

                $(".drop-content").find("li").each(function(){
                    $(this).data("index",$(this).index());
                })
            }
        }
    })
    $(".drop-content").sortable({
        revert: true
    });
    // 双击修改标题
    $(document).on("dblclick", '.drop-content .text-input', function () {
        $(this).prop("readonly", false);
        $(this).val("");
    })
    // 双击添加下拉框的值
    $(document).on("dblclick", '.drop-content .select-option', function () {
        var liIndex = $(this).parents("li").data("index")+1;


        if($(this).find("option").length>0){
            var $option = $(this).find("option");
            var tempH = ''
            for(var item = 0 ;item<$option.length;item++){
                tempH += ' <div class="form-group">\n' +
                    '                        <label class="col-xs-3 control-label">下拉属性值</label>\n' +
                    '                        <div class="col-xs-9">\n' +
                    '                            <input type="text" class="form-control" placeholder="请选择" value="'+($($option[item]).html()==="请选择"?"":$($option[item]).html()) + '">\n' +
                    '                            <button type="button" class="btn btn-link del-property"> <span class="iconfont icon-delete"></span></button>\n' +
                    '                        </div>\n' +
                    '                    </div>'
            }
            $("#optionModal .form-horizontal").html(tempH);
        }
        $("#optionModal").modal('show').data("index",liIndex);
    })
    // 添加下拉框属性值
    $(document).on("click", '.add-propertyVal', function () {
        var tempHtml = ' <div class="form-group">\n' +
            '                        <label class="col-xs-3 control-label">下拉属性值</label>\n' +
            '                        <div class="col-xs-9">\n' +
            '                            <input type="text" class="form-control" placeholder="请输入" value=" ">\n' +
            '                            <button type="button" class="btn btn-link del-property"> <span class="iconfont icon-delete"></span></button>\n' +
            '                        </div>\n' +
            '                    </div>'
        $("#optionModal .form-horizontal").append(tempHtml);
    })
    //删除下拉框属性值
    $(document).on("click", '.del-property', function () {
        $(this).parents(".form-group").remove()
    })
    //删除拖拽的元素
    $(document).on("click", '.del-drapItem', function () {
        $(this).parents("li").remove()
    })
    // 保存下拉框属性信息
    $(document).on("click", ".save-option-btn", function () {
        var listItes = $("#optionModal .form-group");
        var modelIndex = $("#optionModal").data("index")-1;
        var optionTemp = "<opiton value=''>请选择</opiton>";
        for(var i=0;i<listItes.length;i++){
            if(!$(listItes[i]).find(".form-control").val()||$(listItes[i]).find(".form-control").val() == ' '){
                return layer.msg("请补全信息");
            }
            optionTemp += "<option value='"+$(listItes[i]).find(".form-control").val()+"'>"+$(listItes[i]).find(".form-control").val()+"</option>"
        }

        $(".drop-content").find("li").eq(modelIndex).find("select").html(optionTemp);
        $("#optionModal").modal('hide');
    })
    // 保存信息
    $(document).on("click", ".save-btn", function () {
        layer.msg("您点击了保存按钮");
        saveInfo();
    })

    // 取消按钮事件
    $(document).on("click", ".cancel-btn", function () {
        layer.msg("您点击了取消按钮");
    })
    // 保存信息事件
    function saveInfo(){

    }
});

// 拖拽后编辑文本离开事件
function checklabelValue(el) {
    if ($(el).val()) {
        $(el).parents(".drop-item").removeClass("no-val");
    } else {
        $(el).val("双击编辑文本")
        $(el).parents(".drop-item").addClass("no-val")
    }
    $(el).prop("readonly", true);//去除input元素的readonly属性
}

// 拖拽后赛入对应html片段
function getInput() {
    var html = "";
    html += ' <div class="form-group ">\n' +
        '        <label class="col-xs-3 control-label">\n' +
        '            <input type="text" class="text-input no-val" placeholder="请输入" value="双击编辑文本" readonly onblur="checklabelValue(this)">\n' +
        '            <span class="">:</span>\n' +
        '        </label>\n' +
        '        <div class="col-xs-9">\n' +
        '            <input type="text" class="form-control" id="inputEmail3" placeholder="请输入">\n' +
        '            <span class="checkContent">\n' +
        '                 <em class="iconfont icon-exclusive_off1"></em>\n' +
        '                 <label style="font-weight: 400">\n' +
        '                     <input class="chooseCheckBox" type="checkbox" name="isred">必选\n' +
        '                 </label>\n' +
        '             </span>\n' +
        '             <button type="button" class="btn btn-link del-drapItem pull-right"><span\n' +
        '                class="iconfont icon-delete"></span></button>\n' +
        '        </div>\n' +
        '    </div>'
    return html;
}

function getTextarea() {
    var html = "";
    html += '    <div class="form-group">\n' +
        '        <label class="col-xs-3 control-label">\n' +
        '            <input type="text" class="text-input no-val" placeholder="请输入" value="双击编辑文本" readonly onblur="checklabelValue(this)">\n' +
        '            <span class="">:</span>\n' +
        '        </label>\n' +
        '        <div class="col-xs-9">\n' +
        '            <textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="请输入"></textarea>\n' +
        '            <span class="checkContent">\n' +
        '                <em class="iconfont icon-exclusive_off1"></em>\n' +
        '                <label style="font-weight: 400">\n' +
        '                    <input class="chooseCheckBox" type="checkbox" name="isred">必选\n' +
        '                 </label>\n' +
        '             </span>\n' +
        '             <button type="button" class="btn btn-link del-drapItem pull-right"><span\n' +
        '                class="iconfont icon-delete"></span></button>\n' +
        '        </div>\n' +
        '    </div>'
    return html;
}

function getSelect() {
    var html = "";
    html += '    <div class="form-group">\n' +
        '        <label class="col-xs-3 control-label">\n' +
        '            <input type="text" class="text-input no-val" placeholder="请输入" value="双击编辑文本" readonly onblur="checklabelValue(this)">\n' +
        '            <span class="">:</span>\n' +
        '        </label>\n' +
        '        <div class="col-xs-9">\n' +
        '            <select class="form-control select-option"><option value="">请选择</option></select>\n' +
        '            <span class="checkContent">\n' +
        '                <em class="iconfont icon-exclusive_off1"></em>\n' +
        '                <label style="font-weight: 400">\n' +
        '                    <input class="chooseCheckBox" type="checkbox" name="isred">必选\n' +
        '                 </label>\n' +
        '             </span>\n' +
        '             <button type="button" class="btn btn-link del-drapItem pull-right"><span\n' +
        '                class="iconfont icon-delete"></span></button>\n' +
        '        </div>\n' +
        '    </div>'
    return html;
}